<template>
  <div>
    <header-bar />
    <div class="content">
      <banner-slide :slides="banners" />
      <div ref="content">
        <md-tab-bar class="tab" :menu="tabMenu" textKey="title" @change="tabChange" />
        <md-product-list :products="products" />
      </div>
    </div>
    <!-- <header-bar />
    <banner-slide />
    <quick-menu />
    <div>
      <tab-bar />
      <product-list />
    </div> -->
  </div>
</template>

<script>
import HeaderBar from './components/headerBar'
import BannerSlide from './components/bannerSlide'

import scrollBottom from '@/mixins/scrollBottom'

import { offset } from '@/utils/utils'

export default {
  name: 'Home',
  data () {
    return {
      banners: [],
      tabMenu: [],
      products: [],
      fetchParams: {
        page: 1,
        pageSize: 10
      }
    }
  },
  components: {
    HeaderBar,
    BannerSlide
  },
  mixins: [scrollBottom],
  created () {
    this.initData()
    this.fetchProducts()
  },
  mounted () {
    console.log('当前组件')
  },
  methods: {
    async initData () {
      const bannerData = await this.$api.home.banner()
      const tabmenu = await this.$api.home.tabmenu()
      this.banners = bannerData.data
      this.tabMenu = tabmenu.data
    },
    tabChange (index, row) {
      const top = offset(this.$refs.content).top
      window.scrollTo(0, top)
      this.fetchParams.page = 1
      this.fetchProducts()
    },
    async fetchProducts () {
      const data = await this.$api.product.list(this.fetchParams)
      if (this.fetchParams.page === 1) {
        this.products = data.data
      } else {
        this.products = this.products.concat(data.data)
      }
    },
    scrollBottom () {
      this.fetchParams.page += 1
      this.fetchProducts()
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  position: sticky;
  top:0;
  background: #fff;
  z-index: 1000;
}
</style>
